<template>
  <div>
    <audio :src="musicMp3" controls autoplay loop></audio>
  </div>
</template>

<script>
import { mapState } from "vuex";
import api from "../../api";

export default {
  name: "PlayMusic",

  data() {
    return {
      musicMp3: "",
    };
  },

  computed: {
    ...mapState({
      songId: (state) => state.user.clickSongId,
    }),
  },

  watch: {
    songId: {
      immediate: true,
      handler(newId) {
        const music = api.reqGetMusic(newId);
        music.then((music) => {
          this.musicMp3 = music;
        });
      },
    },
  },
};
</script>

<style scoped lang="less">
audio {
  width: 100%;
  height: 40px;
  outline: none;
  background-color: aliceblue;
}
</style>